/* * @name : 表格框架页组件 * @author : FuYaJuan * @参showExportBtn数 {
fieldList : {Array} 表格字段 } * @参数 { queryParam : {Object} 查询条件对象 } *
@参数 { api : {Function} 查询接口函数 } * @参数 { exportFn : {Function()}
分页中的导出函数 } * @参数 { showIndex :{Boolean}是否显示序号，默认显示 } *
@参数 { showColumnSetting : {Boolean} 是否开启动态列设置，默认显示 } * @参数 {
showExportBtn :{Boolean}是否显示导出按钮，默认显示 } * @参数 { showCheckbox :
{Boolean} 是否显示复选框， 默认显示 } * @参数 { page :
{Boolean}是否带分页，默认带分页 } * @参数 { fixed : {String}
列是否固定在左侧或者右侧，默认右侧 } * @参数 { tableOptionWidth 最后一列的宽度 }
* @参数{ columnNum: {Number} 表格默认展示列数设置,不设置默认为 8 列 } *
@表格设置点击列 需要点击的列在 fieldList里 加上type:"link" ,clickFn:方法名示例:{
name: '任务编号', value: 'id', type:"link" ,clickFn:方法名 },data里定义let
方法名 = (row) =>{}
@参数{sortBy:后端翻译的表格字段要在fieldList中加上未翻译之前的字段名,否则会影响后端排序用法示例{name:"xxx",
value: "orgName" ,sortBy:"orgId"}} *
@参数{noSort:{Boolean}不需要排序功能的列加上noSort:true 用法示例{name:"xxx",
value: "orgName" ,noSort:true}} @事件 { getDataInit : {Function()}
重新查询第一页的表格数据 } * @事件{handleCurrentChange : {Function()}
重新查询当前页的表格数据 } * @事件 { getMultipleSelection : {Function()}
获取表格多行选中的数据 } * @version 1.0 * @edit: 2020/05/20 */

<template>
  <div
    style="
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
    "
    id="selHeight1"
    ref="all"
  >
    <div class="s-o-t-wrap">
      <!--查询条件 -->
      <div
        id="selHeight"
        class="search-wrap"
        v-show="searShow === true"
        ref="selHeight"
      >
        <slot name="searchBar" />
      </div>

      <!-- 操作 -->
      <div
        id="butHeight"
        class="table-top-option-wrap"
        v-show="btnShow === true"
        ref="but"
      >
        <div class="left">
          <slot name="tableTopOptionLeft" />
        </div>
        <div class="right">
          <slot name="tableTopOptionRight" />
        </div>
      </div>

      <!-- 表格hqz5210js18678267122 height="66vh"   v-loading="loading" element-loading-text="加载中...  需要显示边框且拖拽就加 border" -->
      <div class="table-wrap" id="table-wrap" ref="tableWrap">
        <!-- :style="height==='0'?{height:'100%'}:{height:height}"
            :height="height==='0'?'':height" -->
        <el-table
          v-loading="loading"
          ref="crudForm"
          :row-key="getRowKey"
          :data="tableData"
          :summary-method="(e) => totalValue"
          :show-summary="totalValue.length === 0 ? false : true"
          @selection-change="handleSelectionChange"
          @sort-change="sortChange"
          @cell-click="cellClick"
          :header-cell-style="tableHeaderStyle"
          cell-class-name="table-body-td"
          :cell-style="columnStyle"
          :height="tableHeight"
          border
          stripe
          :size="size"
        >
          <!-- <template slot="empty">
        <el-empty  :image-size="0" description='暂无数据'></el-empty>
      </template> -->
          <el-table-column
            v-if="showCheckbox"
            type="selection"
            :reserve-selection="true"
            width="55"
            align="center"
          />
          <el-table-column
            v-if="showIndex"
            type="index"
            width="55"
            label="序号"
            align="center"
          />
          <template
            v-for="(item, index) in fieldList.filter((item) => !item.hidden)"
          >
            <!-- align="center" -->
            <!-- :render-header="renderHeader" -->
            <el-table-column
              v-if="item.inSecond == false || item.inSecond == null"
              :key="index"
              min-width="180"
              max-width="500"
              :label="item.name"
              :prop="item.value"
              :width="item.width"
              :sortable="item.noSort ? false : 'custom'"
              :formatter="item.formatter ? item.formatter : null"
              :sort-by="item.sortBy ? item.sortBy : item.value"
              show-tooltip-when-overflow
            >
              <template slot="header" slot-scope="{ column }">
                <!-- 自适应表头宽度 -->
                <span ref="headerSpan">{{ column.label }}</span>
                <!-- <span  ref="headerSpan" >{{ column.label }}</span> -->
              </template>
              <template slot-scope="scope">
                <el-button
                  class="click_cell"
                  v-if="item.type === 'link'"
                  type="text"
                  size="small"
                  @click="item.clickFn(scope.row)"
                  :style="{ textAlign: item.textAlign || '' }"
                  >{{
                    item.formatter
                      ? item.formatter(scope.row)
                      : scope.row[item.value]
                  }}</el-button
                >
                <div class="rowSlot" v-if="item.type === 'linkPreview'">
                  <el-link
                    v-if="item.type1 === 'upload'"
                    class="click_cell"
                    style="width: 30%"
                    type="primary"
                    size="small"
                    :disabled="linkDisabled(scope.row[item.order])"
                    @click="item.clickUpload(scope.row, item.value)"
                    >上传</el-link
                  >
                  <el-link
                    class="click_cell"
                    style="width: 50%"
                    type="primary"
                    size="small"
                    :disabled="linkDisabled(scope.row[item.order])"
                    @click="item.clickPreview(scope.row, item.value)"
                    >预览</el-link
                  >
                  <el-link
                    :disabled="linkDisabled(scope.row[item.order])"
                    type="danger"
                    @click="
                      item.clickDownload(scope.row, item.value, item.name)
                    "
                    >下载</el-link
                  >
                </div>
                <div class="rowSlot" v-if="item.type === 'addDlePreview'">
                  <!-- <el-link
                    class="click_cell"
                    style="width: 30%"
                    type="primary"
                    size="small"
                    @click="item.clickCopy(scope.row, item.value)"
                    >复制</el-link
                  > -->
                  <el-link
                    class="click_cell"
                    style="width: 50%"
                    type="warning"
                    size="small"
                    @click="item.clickEdit(scope.row, item.value)"
                    >{{ item.editText || "编辑" }}</el-link
                  >
                  <el-link
                    class="click_cell"
                    style="width: 50%"
                    type="danger"
                    size="small"
                    @click="item.clickDelete(scope.row, item.value)"
                    >删除</el-link
                  >
                </div>
                <div class="rowSlot" v-else-if="item.type === 'addPreview'">
                  <el-link
                    class="edit_btn"
                    type="primary"
                    size="small"
                    :underline="false"
                    @click="item.clickEdit(scope.row, item.value)"
                    >{{ item.btnText ? item.btnText : "编辑" }}</el-link
                  >
                </div>
                <el-link
                  v-else-if="item.type === 'check'"
                  type="primary"
                  size="small"
                  @click="item.clickCheck(scope.row, item.value)"
                  :disabled="checkDisabled(scope.row[item.order])"
                  >查看</el-link
                >
                <el-input
                  v-else-if="
                    item.type === 'input' ||
                    (item.type === 'editInput' && scope.row.isSet)
                  "
                  v-model="scope.row[item.value]"
                  size="mini"
                ></el-input>
                <a
                  v-else-if="item.type === 'aLink'"
                  :href="scope.row[item.url]"
                  :download="scope.row[item.value]"
                  >{{ scope.row[item.value] }}</a
                >
                <span
                  v-else-if="item.fontColor"
                  :style="{
                    color: scope.row[item.value] == 1 ? 'red' : 'black',
                  }"
                  >{{ scope.row[item.value] == 0 ? "否" : "是" }}</span
                >

                <template v-else>{{
                  item.formatter
                    ? item.formatter(scope.row)
                    : scope.row[item.value]
                }}</template>
              </template>
            </el-table-column>
          </template>

          <template
            v-for="(item, index) in secondHeards.filter((item) => !item.hidden)"
          >
            <!-- align="center" -->
            <!-- :render-header="renderHeader" -->
            <el-table-column
              :key="index"
              min-width="180"
              max-width="500"
              :label="item.name"
              :prop="item.value"
              :width="item.width"
              show="true"
            >
              <!-- 自适应表头宽度 -->
              <template
                v-for="(item2, index2) in fieldList.filter(
                  (item2) => !item2.hidden
                )"
              >
                <el-table-column
                  v-if="item2.inSecond && item.value == item2.type"
                  :key="index2"
                  min-width="180"
                  max-width="500"
                  :label="item2.name"
                  :prop="item2.value"
                  :width="item2.width"
                  show="true"
                >
                  <template slot="header" slot-scope="{ column }">
                    <!-- 自适应表头宽度 -->
                    <span ref="headerSpan">{{ column.label }}</span>
                    <!-- <span  ref="headerSpan" >{{ column.label }}</span> -->
                  </template>
                </el-table-column>
              </template>

              <!-- <span  ref="headerSpan" >{{ column.label }}</span> -->
            </el-table-column>
          </template>

          <el-table-column
            :fixed="fixed"
            :width="tableOptionWidth"
            :label="tableOptionName"
            align="left"
            v-if="showColumnHandle"
          >
            <template slot-scope="scope">
              <slot name="tableOption" :row="scope.row" />
            </template>
          </el-table-column>

          <el-table-column width="40" :fixed="fixed" v-if="showColumnSetting">
            <template slot="header">
              <el-popover
                placement="bottom"
                min-width="80"
                trigger="click"
                popper-class="col-setting-popover"
              >
                <el-button
                  class="set_btn"
                  slot="reference"
                  type="text"
                  icon="el-icon-setting"
                  style="padding: 0; border-color: #f1f1f1"
                  title="展示列设置"
                ></el-button>
                <div class="col-setting-title">展示列设置</div>
                <el-checkbox-group
                  v-model="colOptions"
                  :min="1"
                  class="col-setting-group"
                >
                  <el-checkbox
                    v-for="item in colSelect"
                    :label="item"
                    :key="item"
                    >{{ item }}</el-checkbox
                  >
                </el-checkbox-group>
              </el-popover>
            </template>
          </el-table-column>
        </el-table>
        <!-- 总机组数 -->
        <div v-if="isShow" style="margin-top: 10px; text-align: left">
          <span
            >共<span class="aircrew">{{ total }}</span
            >台机组，</span
          >
          <span
            >总容量<span class="aircrew">{{ totalCap }}</span
            >MW</span
          >
        </div>
      </div>
    </div>
    <div class="dialogPage" v-if="dialogPage" ref="page">
      <el-pagination
        v-fixZoom
        :current-page.sync="listInfo.query.current"
        :page-size="listInfo.query.size"
        :total="listInfo.pageTotal"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper, slot"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :popper-append-to-body="false"
        popper-class="page-setting-popover"
        transition-mode="out-in"
      >
        <span class="el-pagination__jump page-option-wrap">
          <span v-if="showExportBtn">
            <a
              class="el-icon-upload2 page-option-icon"
              href="javascript:;"
              @click="exportTable"
              title="导出"
            >
            </a>
            <i class="split-line"></i>
          </span>

          <span v-if="showRefreshBtn">
            <a
              class="el-icon-refresh page-option-icon"
              href="javascript:;"
              @click="refresh"
              title="刷新"
            >
            </a>
          </span>
        </span>
      </el-pagination>
    </div>
    <!-- 首尾页 -->
    <!-- <div class="dialogPage" v-if="dialogPage" ref="page">
      <el-pagination
      style="display:inline-block"
        :current-page.sync="listInfo.query.current"
        :page-size="listInfo.query.size"
        :total="listInfo.pageTotal"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="total, sizes,slot"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      <el-button style="border: 1px solid #ccc;" @click="goFirstPage" >首页</el-button>
      </el-pagination>
      <el-pagination
      style="display:inline-block"
        :current-page.sync="listInfo.query.current"
        :page-size="listInfo.query.size"
        :total="listInfo.pageTotal"
        :page-sizes="[10, 20, 30, 40, 50, 100]"
        layout="prev, pager, next, jumper, slot"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      <el-button style="border: 1px solid #ccc; margin-left: 15px;" @click="goLastPage" >尾页</el-button>
      </el-pagination>
    </div> -->
    <!-- 分页 -->
    <div class="page-wrap-fixed" v-if="page" id="page-wrap-fixed" ref="page">
      <el-pagination
        v-fixZoom
        :current-page.sync="listInfo.query.current"
        :page-size="listInfo.query.size"
        :total="listInfo.pageTotal"
        :page-sizes="pageSizesCount"
        layout="total, sizes, prev, pager, next, jumper, slot"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :popper-append-to-body="false"
      >
        <span class="el-pagination__jump page-option-wrap">
          <span v-if="showRefreshBtn">
            <a
              class="page-option-icon"
              href="javascript:;"
              @click="refresh"
              title="刷新"
            >
              <!-- <img src="@static/img/7.png" /> -->
            </a>
          </span>
          <span v-if="showExportBtn">
            <i class="split-line"></i>
            <a
              class="page-option-icon"
              href="javascript:;"
              @click="exportTable"
              title="导出"
            >
              <!-- <img src="@static/img/8.png" /> -->
            </a>
          </span>
        </span>
      </el-pagination>
    </div>
  </div>
</template>

<script>
import elementResizeDetectorMaker from "element-resize-detector";
// import { Loading } from "element-ui";
/* eslint-disable */
export default {
  name: "CleanFrom",
  props: {
    pageSize: {
      type: Number,
      default: () => 10,
    },
    // height: {
    //   type: String,
    //   default: () => '0',
    // },
    // 接收一个数组。表示有合计
    totalValue: {
      type: Array,
      default: () => [],
    },
    //二级表头
    secondHeards: {
      type: Array,
      default: () => [],
    },

    fieldList: {
      type: Array,
      default: () => [],
    },

    // 查询条件
    queryParam: {
      type: Object,
      default: () => {},
    },
    // 获取数据的接口
    api: {
      type: Function,
    },
    // q: Unexpected mutation of "queryParam"   如何解决这个报错？

    // 导出
    exportFn: {
      type: Function,
    },
    // 最后一列显示的列名
    tableOptionName: {
      type: String,
      default: "操作",
    },
    // 是否带分页
    page: {
      type: Boolean,
      default: true,
    },
    // 表格是否显示序号
    showIndex: {
      type: Boolean,
      default: true,
    },
    // 是否显示总机组
    isShow: {
      type: Boolean,
      default: false,
    },
    // 表格是否显示复选框
    showCheckbox: {
      type: Boolean,
      default: true,
    },
    // 列是否固定在左侧或者右侧
    fixed: {
      type: String,
      default: "right",
    },
    // 最后一列的宽度
    tableOptionWidth: {
      // type: Number,
      default: 220,
    },
    // 是否开启动态列设置
    showColumnSetting: {
      type: Boolean,
      default: true,
    },
    // 是否显示导出按钮
    showExportBtn: {
      type: Boolean,
      default: true,
    },
    // 是否显示刷新按钮
    showRefreshBtn: {
      type: Boolean,
      default: true,
    },
    // 是否显示操作列
    showColumnHandle: {
      type: Boolean,
      default: true,
    },
    // 是否是对话框分页
    dialogPage: {
      type: Boolean,
      default: false,
    },
    columnNum: {
      default: 8,
    },
    searShow: {
      type: Boolean,
      default: false,
    },
    btnShow: {
      type: Boolean,
      default: false,
    },
    pageSizesCount: {
      type: Array,
      default: () => [10, 20, 30, 40, 50, 100],
    },
    //是否默认加载数据
    outLoad: {
      type: Boolean,
      default: false,
    },
    //高度是否占满
    showTableHight: {
      type: Boolean,
      default: true,
    },
    //高度是否占满
    size: {
      type: String,
      default: null,
    },
    //是否用我写的方法
    isUseMyApiFn: {
      type: Boolean,
      default: true,
    },
    // tableHeight: {
    //   type: String,
    //   default: '',
    // },
  },
  components: {},
  data() {
    return {
      tableHeight: "",
      loading: false,
      colOptions: [],
      colSelect: [],
      tableData: [],
      exportData: {
        headers: [],
        values: [],
      },
      multipleSelection: [],
      // loading: false,
      listInfo: {
        pageTotal: 0, // 总条数
        pageSizes: [5, 10, 20, 50, 100], // 分页数量列表
        query: {
          // 查询条件
          current: 1, // 当前页
          size: this.pageSize, // 每页条数
        },
      },
      total: 0, //常规机组的总机组
      totalCap: 0, //常规机组的总容量
      // pazeSizesCount1: [10, 20, 30, 40, 50, 100],
    };
  },
  created() {
    if (this.outLoad) {
      this.getData(this.api);
    }
  },
  mounted() {
    console.log("-=-=-=-=-=-=-=");
    console.log(this.fieldList);
    // let _this = this;
    window.onresize = () => {
      // console.log(this.showTableHight,this.page)
      if (this.showTableHight) {
        let he1 =
          this.$refs.all.offsetHeight -
          this.$refs.selHeight.offsetHeight -
          this.$refs.page.offsetHeight;
        this.$nextTick(() => {
          this.tableHeight = he1;
        });
      }
    };

    if (this.showTableHight) {
      let he1 =
        this.$refs.all.offsetHeight -
        this.$refs.selHeight.offsetHeight -
        this.$refs.page.offsetHeight;
      this.$nextTick(() => {
        this.tableHeight = he1;
      });
    }

    // this.watchSize();
    // window.addEventListener('resize', this.watchSize)
    for (let i = 0; i < this.fieldList.length; i++) {
      this.colSelect.push(this.fieldList[i].name);
      if (this.showColumnSetting) {
        if (this.colSelect.length > Number(this.columnNum)) {
          continue;
        }
      }
      this.colOptions.push(this.fieldList[i].name);
    }
  },
  computed: {},
  watch: {
    colOptions(colArr) {
      let self = this;
      for (let i in self.fieldList) {
        if (colArr.indexOf(self.fieldList[i].name) === -1) {
          self.fieldList[i].show = false;
        } else {
          self.fieldList[i].show = true;
        }
      }
    },
    // queryParam(val) {
    //   console.log(val);
    //   if (val) {
    //     this.getData(this.api);
    //   }
    // },
  },
  beforeUpdate() {
    this.$nextTick(() => {
      this.$refs.crudForm.doLayout();
    });
  },
  methods: {
    tableHeaderStyle({ row, column, rowIndex, columnIndex }) {
      return "width: 159px;font-family: Source Han Sans CN;font-size: 18px;line-height: 24px;";
    },
    linkDisabled(val) {
      return val == null || val == undefined || val == "" || val == "-";
    },

    checkDisabled(val) {
      return val == null || val == undefined || val == "" || val == "-";
    },
    // goLastPage(){
    //   this.listInfo.query.current = Math.ceil(this.listInfo.pageTotal/this.listInfo.query.size);
    //   this.getData(this.api);
    // },
    // goFirstPage(){
    //   this.listInfo.query.current = 1;
    //   this.getData(this.api);
    // },
    getRowKey(row) {
      if (row.unitsId) {
        return row.unitsId;
      }
      if (row.stationId) {
        return row.stationId;
      }
    },

    // 表头部重新渲染
    renderHeader(h, { column, $index }) {
      // 新建一个 span
      let span = document.createElement("span");
      // 设置表头名称
      span.innerText = column.label;
      // 临时插入 document
      document.body.appendChild(span);
      // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
      column.minWidth = span.getBoundingClientRect().width + 50;
      // 移除 document 中临时的 span
      document.body.removeChild(span);
      return h("span", column.label);
    },
    // 分页width
    watchSize() {
      // let _this = this;
      let erd = elementResizeDetectorMaker();
      let pageWidth = document.getElementById("page-wrap-fixed");
      erd.listenTo(this.$refs.tableWrap, function (element) {
        if (pageWidth) {
          pageWidth.style.width = element.offsetWidth + "px";
        }
      });
    },
    // 分页-刷新
    refresh() {
      this.listInfo.query.current = 1;
      this.getData(this.api);
    },
    // 导出
    exportTable() {
      if (!this.tableData.length) {
        this.$message({
          showClose: true,
          message: "列表数据为空,无法导出!",
          type: "warning",
        });
        return;
      }
      this.exportData.headers = [];
      this.exportData.values = [];
      for (let i = 0; i < this.fieldList.length; i++) {
        if (this.fieldList[i].show == true) {
          this.exportData.headers.push(this.fieldList[i].name);
          this.exportData.values.push(this.fieldList[i].value);
        }
      }
      this.exportFn ? this.exportFn() : null;
    },
    // 表格多行选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
      // this.$emit("getMultipleSelection", this.multipleSelection);
    },
    // 获取表格多行选择的数据
    getMultipleSelection() {
      return this.multipleSelection;
    },
    // 调用接口 获取数据
    getData(api) {
      this.loading = true;
      // let loadingInstance = Loading.service({ fullscreen: true });
      // console.log(loadingInstance,'_____________23141234')
      return new Promise(() => {
        api(this.handleParams()).then((res) => {
          // loadingInstance.close();
          // console.log(res.data, 6666);
          this.loading = false;
          if (
            res.resultCode === 0 ||
            (res.resultCode === 0 && this.isUseMyApiFn === true)
          ) {
            const d = res.data;
            // 区分list和分页

            if (this.isUseMyApiFn || d.records) {
              this.tableData = this.isUseMyApiFn ? d : d.records;
              this.listInfo.pageTotal = this.isUseMyApiFn
                ? res.page.count
                : d.total;
              this.listInfo.query.size = this.isUseMyApiFn
                ? res.page.pageSize
                : d.size;
              this.listInfo.query.current = this.isUseMyApiFn
                ? res.page.pageIndex
                : d.current;
              (this.total = this.isUseMyApiFn ? this.total : this.total),
                (this.totalCap = this.isUseMyApiFn ? this.total : d.totalCap);
            } else if (d.stationInfos) {
              this.tableData = d.stationInfos.records;
              this.listInfo.pageTotal = d.stationInfos.total;
              this.listInfo.query.size = d.stationInfos.size;
              this.listInfo.query.current = d.stationInfos.current;
            }
          } else if (res.mesg) {
            this.$message.error(res.mesg);
          } else {
            this.$message.error(res.data);
          }
        });
        // .catch(() => {
        //   this.$message.error('数据加载失败!')
        // })
      });
    },
    // 重新查询第一页的表格数据
    getDataInit() {
      this.listInfo.query.current = 1;
      this.getData(this.api);
      this.$refs.crudForm.clearSelection();
    },
    // 处理接口调用所需的参数
    handleParams() {
      const obj = {};
      for (const key in this.queryParam) {
        if (this.queryParam[key] || this.queryParam[key] === null) {
          obj[key] = this.queryParam[key];
        }
      }
      // console.log({ ...this.listInfo.query }, { ...obj }, '{ ...this.listInfo.query, ...obj }');
      if (this.isUseMyApiFn) {
        return { ...this.queryParam };
      }
      return { ...this.listInfo.query, ...this.queryParam };
    },
    // pageSize 改变时会触发
    handleSizeChange(val) {
      const query = this.listInfo.query;
      query.size = val; // 每页条数
      query.current = 1; // 每页条数切换，重置当前页
      this.getData(this.api);
    },
    // currentPage 改变时会触发
    handleCurrentChange(val) {
      this.listInfo.query.current = val; // 当前页
      this.getData(this.api);
    },
    // 列排序
    sortChange(column) {
      // this.queryParam.sortColumn = column.column.sortBy
      this.queryParam.orderField = column.column.sortBy;
      if (column.order === "ascending") {
        this.queryParam.order = "asc";
      } else {
        this.queryParam.order = "desc";
      }

      this.getData(this.api);
    },
    // 点击列
    columnStyle(row, column, rowIndex, columnIndex) {
      for (let i = 0; i < this.fieldList.length; i++) {
        if (!!this.fieldList[i].clickable) {
          if (row.column.label == this.fieldList[i].name) {
            return "color: #1396c2; cursor: pointer;";
          } else {
            continue;
          }
        }
      }
    },
    // 表格点击事件
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
  },
  beforeDestroy() {
    // window.removeEventListener('resize', this.watchSize)
  },
};
/* eslint-enable */
</script>

<style lang="scss" scoped>
// .pagetable {
//     position: absolute;
//     bottom: 0;
//     left: 50%;
//     transform: translate(-50%, 0%);
//     width: 100%;
//     height: 40px;
//     background-color: #f1f1f1;
//     .el-pagination {
//         position: absolute;
//         top: 50%;
//         left: 50%;
//         transform: translate(-50%, -50%);
//         span,
//         a {
//             display: inline-block;
//         }
//         a {
//             width: 20px;
//             height: 23px;
//             color: #1396c2;
//             font-size: 14px;
//             font-weight: 800;
//             margin-right: 16px;
//         }
//     }
// }

::v-deep .el-card__body {
  height: 100%;
}

// 表格文字居中
::v-deep .el-table__cell {
  text-align: center;
}
.dialogPage {
  padding: 10px 0;
  text-align: center;
  width: 100%;
  // margin-top: -45px;
  position: relative !important;
  // .page-setting-popover {
  //   z-index: 3000;
  //   position: relative !important;
  //   top: 0px !important;
  //   margin: 0px;
  //   border: 1px solid #55aaff;
  // }
}

.page-setting-popover {
  z-index: 3000;
  position: absolute !important;
  margin: 0px;
  border: 1px solid #55aaff;
}

.s-o-t-wrap {
  // margin-bottom: 45px;
  width: 100%;
  height: 100%;
}

.search-wrap {
  // background-color: #fcfcfc;
  // border-top: 1px solid #eee;
  // border-bottom: 1px solid #eee;
  // eslint-disable-next-line
  padding: 16px 30px 6px;

  ::v-deep .el-input {
    width: 180px;
  }

  ::v-deep .el-date-editor.el-input__inner {
    width: 180px;
  }

  // ::v-deep .el-form-item {
  //   // margin: 0 15px 8px 0;
  // }

  ::v-deep .el-form-item__label {
    width: 91px;
    text-align: right;
  }

  ::v-deep .el-range-editor .el-range__icon,
  ::v-deep .el-range-editor {
    padding-right: 0;
    display: none;
  }

  ::v-deep .el-range__close-icon {
    color: #c0c4cc;
    font-size: 13px;
    width: 15px;
  }
}

.table-top-option-wrap {
  margin: 10px 15px;
  overflow: hidden;

  .left {
    float: left;
    margin-bottom: 10px;

    >>> .el-button--primary {
      width: 120px;
      height: 32px;
      border-radius: 2px;
    }
  }

  .right {
    float: right;

    >>> .el-button {
      width: 120px;
      height: 32px;
      border-radius: 2px;
    }
  }
}

.table-wrap {
  padding: 0 15px;

  .el-table th {
    padding: 2px 0;
  }
  ::v-deep .el-tooltip {
    width: 100% !important;
  }
  .click_cell {
    // color: #1396c2 !important;
    font-size: 14px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
    margin-left: 5px;
  }

  .set_btn {
    color: #1396c2 !important;
    font-size: 13px;
    border: none;
  }
  .edit_btn {
    color: #017e81 !important;
    font-size: 13px;
    border: none;
  }
}

::v-deep .el-table__header th {
  padding: 5px 0 0 !important;
  font-size: 13px !important;
}

.table-wrap >>> .table-header {
  background-color: #f1f1f1;
  color: #232323;
  font-weight: bold;

  th {
    background-color: #f1f1f1;
  }
}

.table-wrap >>> .table-body-td {
  color: #232323;
  padding: 3px 0;
}

>>> .el-table--striped
  .el-table__body
  tr.el-table__row--striped.el-table__row--striped.el-table__row--striped
  td {
  background-color: #f7f7f7 !important;
  /*替换为你需要的颜色，觉得优先级不够就加!important*/
}

// ::v-deep .el-table__body-wrapper {
//   // margin-bottom: 3px !important;
// }

::v-deep .el-table td div {
  display: inline-block;
}

::v-deep .el-upload-list {
  display: none;
}
::v-deep .el-table-column--selection .cell {
  padding-right: 10px;
}

.aircrew {
  border: 1px gray solid;
  border-radius: 4px;
  padding: 2px 12px;
  color: rgb(250, 143, 11);
}

// .page-setting-popover {
//   z-index: 3000;
//   position: absolute;
//   left: 147px !important;
//   top: 355px !important;
//   margin: 0px;
//   border: 1px solid #55aaff;
//   .el-select-dropdown {
//     background-color: #ffffff;
//   }
//   .el-select-dropdown__item.selected {
//     color: red;
//   }

//   .el-select-dropdown__item.hover,
//   .el-select-dropdown__item:hover {
//     background: red;
//     color: #fff;
//   }
// }

/* 修改前后箭头未点击时的背景颜色 */
:deep .el-pagination .btn-prev,
:deep .el-pagination .btn-next {
  color: #0a817e !important;
}
/* 修改未点击时的数字方块背景颜色 */
:deep .el-pagination .el-pager li:not(.active):not(.disabled):hover {
  color: #606266 !important;
}
:deep .el-pagination .el-pager li.active {
  color: #0a817e !important;
}
/* 未点击时的数字方块背景颜色 */
:deep .el-pagination .el-pager li:not(.active):not(.disabled) {
  color: #606266 !important;
}
:deep(.el-pagination.is-background .el-pager li:not(.is-disabled).is-active) {
  color: #606266 !important;
}
</style>
